<script setup lang="ts">
import { ref } from 'vue';
import CustomPassword from './components/passoword.vue'
import CustomMobile from './components/mobile.vue'
// 标签切换数组
const tabMetas=[
  {title:'密码登录',sunTitle:'验证码登录'},
  {title:'验证码登录',sunTitle:'密码登录'}
]
// 定义当前选中的下标
const tabIndex=ref(0)
// 定义点击时切换下标
const changeTabMeta=()=>{
  tabIndex.value=Math.abs(tabIndex.value-1)
}
</script>

<template>
  <view class="user-login">
    <view class="login-type">
      <view class="title">{{ tabMetas[tabIndex].title }}</view>
      <view class="type">
        <text @click="changeTabMeta">{{ tabMetas[tabIndex].sunTitle }}</text>
        <uni-icons color="#3c3e42" type="forward" />
      </view>
    </view>
    <!-- 登录按钮样式 -->
     <CustomPassword v-if="tabIndex===0"></CustomPassword>
     <CustomMobile v-if="tabIndex===1"></CustomMobile>
  </view>
  <!-- 社交账号登录 -->
  <view class="social-login">
    <view class="legend">
      <text class="text">其它方式登录</text>
    </view>
    <view class="social-account">
      <view class="icon">
        <uni-icons color="#00b0fb" size="30" type="qq" />
      </view>
      <view class="icon">
        <uni-icons color="#fb6622" size="30" type="weibo" />
      </view>
      <view class="icon">
        <uni-icons color="#07C160" size="30" type="weixin" />
      </view>
    </view>
  </view>
</template>

<style lang="scss">
	@import './index.scss'
</style>